<template>
    <div>
        <!-- 服务质量 -->
        <box-group-wrap pageTitle="服务质量" :isShowData="isShowData">
            <template slot="wrapBody">
                <div class="kpiIndex">
                    <div class="kpiItemOne">
                        <el-progress type="circle" :percentage="90" color="#f5b23e"></el-progress>
                        <p>本月质检率</p>
                    </div>
                    <div class="linelw"></div>
                    <div class="kpiItemTwo">
                        <div class="kpiCenter">
                            <span>98</span>
                            <p>本月质检平均得分</p>
                        </div>
                    </div>
                    <div class="linelw"></div>
                    <div class="kpiItem">
                        <div class="kpiCenter">
                            <span>0</span>
                            <p>质检差错</p>
                        </div>
                    </div>
                    <div class="linelw"></div>
                    <div class="kpiItem">
                        <div class="kpiCenter">
                            <span>5</span>
                            <p>本月质检数</p>
                        </div>
                    </div>
                    <div class="linelw"></div>
                    <div class="kpiItem">
                        <div class="kpiCenter">
                            <span>0</span>
                            <p>本月申诉数</p>
                        </div>
                    </div>
                </div>
            </template>
        </box-group-wrap>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { isEmptyObject } from '@/utils/Object';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';

export default {
    name: 'ServiceQuality',
    data() {
        return {
            isShowData: true
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, },
    mounted() {

    },
    methods: {

    },
}
</script>
<style lang="scss">
.el-progress__text {
    color: #f5b23e;
}
</style>
<style scoped lang="scss">
.kpiIndex {
    display: flex;
    .kpiItemOne,
    .kpiItemTwo {
        flex: 1.3;
    }
    .kpiItemTwo {
        margin-top: 15px;
    }
    .kpiItem {
        flex: 1;
        margin-top: 15px;
    }
    .kpiCenter {
        margin: 25px 0;
        span {
            font-size: 26px;
            color: #1579dd;
        }
        p {
            font-size: 16px;
            margin-top: 20px;
        }
    }
    .linelw {
        margin: 20px 0;
        border-right: 2px dashed #9ecfff;
    }
}
</style>